<template>
  <div class="stacked-line-chart">
    <div id="main" class="chart-content"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { onMounted, onUnmounted } from 'vue';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 注册ECharts所需组件
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

onMounted(() => {
  // 确保DOM加载完成后初始化图表，避免"invalid dom"错误
  const chartDom = document.getElementById('main');
  if (chartDom) {
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '成品销量',
        // 调整标题位置，与外部标题呼应
        left: 'center',
        top: 0,
        textStyle: {
          fontSize: 16,
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'axis',
        // 优化提示框样式，提升可读性
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e7eb',
        borderWidth: 1,
        borderRadius: 6,
        padding: 10,
        textStyle: {
          color: '#333',
          fontSize: 12
        }
      },
      legend: {
        data: ['止常成品', '本厂成品', '免费返修'],
        // 调整图例位置，避免遮挡
        top: 30,
        left: 'center',
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          fontSize: 12,
          color: '#666'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '18%', // 为标题和图例预留空间
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            iconStyle: {
              color: '#666'
            },
            title: '保存图表'
          }
        },
        right: 10,
        top: 10
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2025-08-01', '2025-08-02','2025-08-03','2025-08-04','2025-08-05','2025-08-06','2025-08-07'],
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12
        }
      },
      series: [
        {
          name: '止常成品',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
          lineStyle: { width: 2 },
          itemStyle: { borderRadius: 4 },
          areaStyle: { opacity: 0.7 }
        },
        {
          name: '本厂成品',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
          lineStyle: { width: 2 },
          itemStyle: { borderRadius: 4 },
          areaStyle: { opacity: 0.7 }
        },
        {
          name: '免费返修',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
          lineStyle: { width: 2 },
          itemStyle: { borderRadius: 4 },
          areaStyle: { opacity: 0.7 }
        }
      ],
      // 优化动画效果，提升交互体验
      animationDuration: 1200,
      animationEasing: 'cubicOut'
    };

    // 渲染图表
    option && myChart.setOption(option);

    // 监听窗口 resize 事件，自动调整图表尺寸
    const handleResize = () => {
      myChart.resize();
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理资源，防止内存泄漏
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose(); // 销毁图表实例
    });
  }
});
</script>

<style scoped>
/* 组件外层容器：控制整体布局 */
.stacked-line-chart {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 图表头部：标题与说明样式 */
.chart-header {
  margin-bottom: 16px;
}

.chart-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.chart-desc {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* 图表容器：必须设置明确宽高，否则ECharts无法渲染 */
.chart-content {
  width: 100%;
  height: 450px; /* 桌面端默认高度 */
}

/* 响应式适配：移动端调整尺寸 */
@media (max-width: 768px) {
  .stacked-line-chart {
    padding: 16px;
    margin: 16px auto;
  }

  .chart-content {
    height: 350px; /* 移动端减小高度 */
  }

  .chart-title {
    font-size: 16px;
  }

  .chart-desc {
    font-size: 12px;
  }
}
</style>